<!-- 
  package.json 中写的 ^ ~ 的意思是什么
    "vue": "^3.3.11"

    告诉 npm 在安装这个依赖的时候，如果该包有新版本，是否允许下载新的。
        ^ - 允许下载次版本中最新的
        ~ - 允许下次修复版本中最新的

  版本号小常识：
    x.y.z

      x - 主版本，当有无法向下兼容的内容更新时，就会升级主版本
      y - 次版本，当有一些新的概念增加时，就会选择升级次版本
      z - 修复版本，当有一些bug被修复时，就会选择升级修复版本

 -->

<template>
  <div>
    <h2>World</h2>
    <button @click="onClick">{{ count }}</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  count: number;
}>();

// emits: []
// emits: {}
const emit = defineEmits(["change"]);

function onClick() {
  // 修改 count 这个 prop
  // props.count++;

  // 触发一个自定义事件，让父组件来决定如何操作
  emit("change");
}
</script>
